<template>
    <div class="w-full h-100vh flex-center">
        <div
            class="w-400px box-border p-20px flex flex-col items-center shadow-2xl"
        >
            <div class="font-size-24px">会议室预订系统</div>
            <div v-if="!isAutoLogin" class="w-full h-310px">
                <div class="w-full my-20px flex flex-col gap-20px">
                    <n-input
                        v-model:value="loginForm.account"
                        placeholder="账号"
                        size="large"
                        maxlength="9"
                    />
                    <n-input
                        v-model:value="loginForm.password"
                        placeholder="密码"
                        type="password"
                        show-password-on="click"
                        size="large"
                        maxlength="15"
                    />
                </div>
                <div class="w-full flex justify-between">
                    <n-checkbox v-model:checked="remberer">记住我</n-checkbox>
                    <n-button
                        text
                        :focusable="false"
                        @click="router.push({ name: 'register' })"
                        >注册账号</n-button
                    >
                </div>
                <n-button
                    type="primary"
                    size="large"
                    class="w-full my-20px"
                    :focusable="false"
                    @click="handleLogin"
                    >登录</n-button
                >
                <n-divider title-placement="center">
                    <n-button
                        text
                        type="warning"
                        :focusable="false"
                        @click="router.push({ name: 'forget' })"
                        >忘记密码</n-button
                    >
                </n-divider>
            </div>
            <div v-else class="w-full h-310px flex-col flex-center">
                <n-spin size="large" />
                <div class="font-size-16px color-#18A058 mt-20px">
                    正在校验登陆状态...
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { getStore } from "@/store/index";

import { login } from "@/service/api/modules/user";
import { autoLogin } from "@/service/api/modules/auth";
import { asyncGenerateRoutes } from "@/router/routes/asyncRoutes";

const router = useRouter();
const userStore = getStore("user");

const loginForm = reactive({
    account: "",
    password: "",
});

const isAutoLogin = ref(false);
const remberer = ref(false);

onMounted(async () => {
    if (localStorage.getItem("auto-login")) {
        isAutoLogin.value = true;
        try {
            await autoLogin();
            router.addRoute(asyncGenerateRoutes(userStore.getUserInfo.role));
            router.push({ path: "/layout" });
        } catch (err) {
            window.NMessage.error(
                `登陆状态验证失败: ${(err as Error).message}`
            );
        } finally {
            isAutoLogin.value = false;
        }
    }
});

const handleLogin = () => {
    if (loginForm.account.length !== 9 || loginForm.password.length < 8) {
        window.NMessage.warning("请输入正确的账号和密码");
        return;
    }
    login(loginForm)
        .then(() => {
            // 用户验证成功后根据权限动态生成路由
            router.addRoute(asyncGenerateRoutes(userStore.getUserInfo.role));

            router.push({ path: "/layout" });

            if (remberer.value) {
                localStorage.setItem("auto-login", "true");
            }
        })
        .catch((err: Error) => {
            window.NMessage.error(err.message);
        });
};
</script>

<style scoped>
* {
    user-select: none;
}
</style>
@/service/request/request @/store/core/user
